<template>
    <div>
        <a-row class="indicator">
            <a-col :xs="8" :sm="8" :md="8" :lg="8" style="padding-right: 5px">
                <a-select v-model="indicators[index].event" show-search option-filter-prop="children" :filter-option="EventSearch"  @change="changeEvent">
                    <a-select-opt-group label="默认事件">
                        <a-select-option value="Any" :key="events.length">任意事件</a-select-option>
                        <a-select-option v-if="item.type === 0" v-for="(item, idx) in events" :value="item.name" :key="idx">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                    <a-select-opt-group label="自定义事件">
                        <a-select-option v-if="item.type === 1" v-for="(item, idx) in events" :value="item.name" :key="idx">{{ item.displayName }}</a-select-option>
                    </a-select-opt-group>
                </a-select>
            </a-col>
            <a-col :xs="1" :sm="1" :md="1" :lg="1" style="text-align:center;padding-right: 5px">
                的
            </a-col>
            <a-col :xs="8" :sm="8" :md="8" :lg="8" style="padding-right: 5px">
                <a-select v-model="measureNames" mode="multiple" @change="changeMeasure" show-search option-filter-prop="children" :filter-option="EventSearch">
                    <a-select-option v-for="(item, idx) in eventMeasures" :value="item.name" :key="idx">{{ item.displayName }}</a-select-option>
                </a-select>
            </a-col>
            <a-col :xs="7" :sm="7" :md="7" :lg="7" style="padding-right: 5px">
                <a-button icon="minus" style="margin-right: 5px;" v-if="indicators.length > 1" @click="$parent.removeItem(index)"></a-button>
                <a-button style="margin-right: 5px;" icon="plus" v-if="isLast()" @click="$parent.addItem"></a-button>
                <a-button @click="addFilterItem">添加筛选</a-button>
            </a-col>
        </a-row>
        <MultiLevelFilter ref="filterGroup" v-model="indicators[index].filter" v-bind:properties="properties" v-bind:datasourceId="datasourceId" virtual @remove="demote"></MultiLevelFilter>
    </div>
</template>

<script>
    import MultiLevelFilter from "./Filter/MultiLevelFilter";

    export default {
        name: "Indicator",
        components: { MultiLevelFilter },
        props: {
            events: Array,
            index: Number,
            properties: Array,
            indicators: Array,
            measures: Array,
            datasourceId: Number
        },
        data: function() {
            return {
                measureNames: [],
                eventsProps: []
            }
        },
        computed: {
            eventMeasures: function() {
                let eventMeasures = [];
                for(let i = 0; i < this.measures.length; i++) {
                    if(this.measures[i].event === this.indicators[this.index].event || this.measures[i].event === "") {
                        eventMeasures.push({
                            name: this.measures[i].name,
                            displayName: this.measures[i].displayName
                        })
                    }
                }
                return eventMeasures;
            },

        },
        methods: {
            //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
            demote: function (index) {
                let originalFilter = this.indicators[this.index].filter;
                let filterIndex = originalFilter.filters.findIndex((item) => {
                    return item.index === index;
                });
                if(filterIndex !== -1) {
                    let filter = originalFilter.filters[filterIndex];
                    originalFilter.filters.splice(filterIndex, 1);
                    originalFilter.condition = filter.condition;
                    filter.rules.forEach((item, index) => {
                        originalFilter.rules.push(item);
                    });
                    filter.filters.forEach((item, index) => {
                        originalFilter.filters.push(item);
                    });
                }
            },
            isLast: function() {
                return this.indicators.length === (this.index + 1);
            },
            removeDuplicates(arr){
                let obj = {}
                return arr.filter((item, index) => {
                    // 防止key重复
                    let newItem = item + JSON.stringify(item)
                    return obj.hasOwnProperty(newItem) ? false : obj[newItem] = true
                })
            },
            addFilterItem: function() {
                this.$refs.filterGroup.addRule();
            },
            removeItem: function() {
                this.indicators.splice(this.index, 1);
            },
            changeEvent: function(selectedValue) {
                this.measureNames.splice(0, this.measureNames.length);
            },
            EventSearch: function(input, option) {
                return (option.componentOptions.children[0].text && option.componentOptions.children[0].text.indexOf(input) > -1);
            },
            changeMeasure: function(selectedValue) {
                this.indicators[this.index].measure.splice(0, this.indicators[this.index].measure.length);
                for (let i = 0; i < this.measures.length; i++) {
                    if (this.measureNames.includes(this.measures[i].name)) {
                        this.indicators[this.index].measure.push(
                            {
                                name: this.measures[i].name,
                                value: this.measures[i].value
                            }
                        );
                    }
                }
            },
            initMeasure: function() {
                this.measureNames.splice(0, this.measureNames.length);
                for(let i = 0; i < this.indicators[this.index].measure.length; i++) {
                    this.measureNames.push(this.indicators[this.index].measure[i].name);
                }

            }
        },
        watch: {
            indicators: function() {
                this.initMeasure();
            }
        },
        mounted: function() {
            this.eventsProps = JSON.parse(JSON.stringify(this.events))
            this.initMeasure();
            if(this.indicators[this.index].event === "" && this.events.length > 0) {
                this.indicators[this.index].event = "Any";
            } 
            // console.log(this.events)
        }
    }
</script>

<style scoped>

</style>